<template>
    <!-- 医生-我的用户 -->
    <div class="my-user-box">
      <div class="l-panel">
        <template v-if="!isApply">
          <div>
            <el-form :inline="true" class="demo-form-inline" size="small">
              <el-form-item label="">
                <el-input v-model="name" placeholder="患者姓名/手机号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-date-picker
                  size="small"
                  v-model="time"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始申请日期"
                  end-placeholder="结束申请日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="">
                <el-select v-model="name" placeholder="处理状态">
                  <el-option></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getMysubscriber()"
                  >查询</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="applyConsult"
                  >会诊申请+</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <yx-table
            :is-fit="false"
            :table-data="tableData"
            :columns="columns"
            :page-obj="pageObj"
            :loading="loading"
            :tableHeightDefault="500"
          >
            <template slot="patientSex" slot-scope="scope">
              <p>{{ scope.scope.patientSex | sexFilter }}</p>
            </template>
            <template slot="operate" slot-scope="scope">
              <div class="operate-btn">
                <div>
                  <el-button
                    style="color: #006DB8;"
                    size="small"
                    type="text"
                    @click="checkCase(scope.scope)"
                  >
                    查看详情
                  </el-button>
                </div>
                <div>
                  <el-button
                    style="color: #006DB8;"
                    size="small"
                    type="text"
                    @click="checkCase(scope.scope)"
                  >
                    发起会诊
                  </el-button>
                </div>
                <div>
                  <el-button
                    style="color: #006DB8;"
                    size="small"
                    type="text"
                    @click="checkCase(scope.scope)"
                  >
                    查看会诊单
                  </el-button>
                </div>
                <div>
                  <el-button
                    style="color: #006DB8;"
                    size="small"
                    type="text"
                    @click="checkCase(scope.scope)"
                  >
                    通过审核
                  </el-button>
                </div>
                <div>
                  <el-button
                    style="color: #006DB8;"
                    size="small"
                    type="text"
                    @click="checkCase(scope.scope)"
                  >
                    拒绝会诊
                  </el-button>
                </div>
              </div>
            </template>
          </yx-table>
        </template>
        <template v-else>
          <apply @back="backConsult" />
        </template>
      </div>
      <!-- 发送消息弹窗 -->
      <el-dialog :title="'发送消息'" :visible.sync="mesVisible">
        <div>
          <el-form :model="messageForm" ref="messageForm" :rules="rules">
            <el-form-item prop="message">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                v-model="messageForm.message"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="send-message-btn" slot="footer">
          <el-button size="small" @click="mesVisible = false">取消</el-button>
          <el-button type="primary" size="small" @click="saveMessage"
            >保存</el-button
          >
        </div>
      </el-dialog>

      <!-- 患者聊天记录 -->
      <el-dialog
        class="dialog-frame"
        title="聊天记录"
        width="800"
        :visible.sync="chatRecordDialog"
        @close="chatRecordDialog = false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-button type="primary" @click="openVideoRecord">视频记录</el-button>
        <el-table
          class="l-table"
          :data="recordList"
          border
          max-height="480"
          highlight-current-row
        >
          <el-table-column prop="name" label="时间">
            <template slot-scope="scope">
              <span>{{ scope.row.msgDate || "-" }} </span>
            </template>
          </el-table-column>
          <el-table-column prop="size" label="角色">
            <template slot-scope="scope">
              <span>{{ scope.row.msgUserName }} </span>
            </template>
          </el-table-column>
          <el-table-column prop="size" label="内容">
            <template slot-scope="scope">
              <viewer v-if="isUrl(scope.row.msgText)">
                <img :src="scope.row.msgText" width="100" title="点击预览" />
              </viewer>
              <span v-else>{{ scope.row.msgText }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align:center;margin:15px 25px;"
          @current-change="changeRecordListCurrent"
          :current-page="recordPage.current"
          :page-size="recordPage.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="recordPage.total"
          @size-change="handleSizeChange"
          :page-sizes="[10, 20, 50]"
        >
        </el-pagination>
      </el-dialog>
      <!-- 患者聊天记录-视频记录 -->
      <el-dialog
        class="dialog-frame"
        title="视频记录"
        width="800"
        :visible.sync="dialogVideoRecord"
        v-if="dialogVideoRecord"
        @close="dialogVideoRecord = false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <div v-for="(v, i) in 4" :key="i">
          <div>2022/04/01</div>
          <video :id="'playerId' + i" class="video-js" controls></video>
        </div>
      </el-dialog>
      <!-- 查看病历组件 -->
      <case-history ref="caseHistory"></case-history>
    </div>
  </template>

  <script>
  import yxTable from "@/components/yxtable/yx-table";
  import caseHistory from "@/components/case-history";
  // import apply from "./apply.vue";
  import { isUrl } from "@/utils";
  export default {
    components: {
      yxTable,
      caseHistory,
      // apply
    },
    data() {
      return {
        viewCaseVisible: false,
        columns: [
          { label: "序号", prop: "" },
          { label: "患者姓名11", prop: "inquiryPatientName" },
          { label: "会诊医生", prop: "patientName" },
          { label: "会诊医院", prop: "patientName" },
          { label: "备注", slot: "patientSex" },
          { label: "处理状态", prop: "patientAge" },
          { label: "拒绝原因", prop: "patientPhone" },
          { label: "申请时间", prop: "createTime" },
          { label: "审核时间", prop: "createTime" },
          { label: "操作", slot: "operate" }
        ], // 操作列
        loading: false,
        pageObj: {
          size: 10,
          total: 0,
          currentPage: 1,
          func: currentPage => {
            this.pageTurning(currentPage);
          },
          handleSizeChange: size => {
            this.sizeChange(size);
          }
        },
        tableData: [],
        name: "",
        phone: "",
        time: [],
        mesVisible: false,
        messageForm: {
          message: ""
        },
        rules: {
          message: [{ required: true, message: "数量不能为空", trigger: "blur" }]
        },
        caseInfo: {},
        idCard: "",
        userId: null,
        chatRecordDialog: false, //聊天记录弹框
        patientMsg: {}, //患者消息列表
        recordPage: {
          //聊天记录分页
          total: 0,
          current: 1,
          size: 10
        },
        recordList: [], //聊天记录列表
        dialogVideoRecord: false,
        isApply: false
      };
    },
    mounted() {
      this.getMysubscriber();
      this.isApply = this.$route.query.isApply;
    },
    methods: {
      isUrl,
      // 发送消息
      sendMes(e) {
        this.userId = e.userId;
        this.mesVisible = true;
      },
      // 查看病历
      checkCase(e) {
        this.$nextTick(() => {
          if (this.$global.platform("lj")) {
            this.$refs.caseHistory.onOpen("his", e);
          } else {
            if (this.$global.isNewCase) {
              this.$refs.caseHistory.onOpen("ca", e);
            } else {
              this.$refs.caseHistory.onOpen("normal", {
                caseInfo: e,
                idCard: e.patientIdcard
              });
            }
          }
        });
      },
      saveMessage() {
        let para = {
          webToken: this.$authInfo.webToken(),
          noticeContent: this.messageForm.message,
          userId: this.userId
        };
        this.$ajax
          .sendNewsMysubscriber(para)
          .then(res => {
            this.mesVisible = false;
            this.$message({
              message: res.msg,
              type: "success"
            });
          })
          .catch(err => {
            this.$message({
              message: err.msg,
              type: "error"
            });
          });
      },
      pageTurning(currentPage) {
        this.pageObj.currentPage = currentPage;
        this.getMysubscriber();
      },
      sizeChange(size) {
        this.pageObj.size = size;
        this.getMysubscriber();
      },
      getMysubscriber() {
        this.loading = true;
        let params = {
          current: this.pageObj.currentPage,
          size: this.pageObj.size,
          name: this.name,
          phone: this.phone
        };

        if (this.time) {
          params.maxTime = this.time[1];
          params.minTime = this.time[0];
        }

        this.$ajax
          .getMysubscriber(params)
          .then(res => {
            this.loading = false;
            let { code, data } = res;
            if (code === 1) {
              this.tableData = data.list;
              this.pageObj.total = data.total;
            }
          })
          .catch(err => {
            this.loading = false;
          });
      },
      handleSizeChange(val) {
        this.recordPage.size = val;
        this.getRecordList();
      },
      checkChatRecord(e) {
        this.patientMsg = e;
        this.chatRecordDialog = true;
        this.getRecordList();
      },
      getRecordList({ page } = {}) {
        // 诊断规范
        page && (this.recordPage.current = page);
        let para = {
          webToken: this.$authInfo.webToken(),
          current: this.recordPage.current,
          size: this.recordPage.size,
          patientId: this.patientMsg.userId,
          userSource: this.patientMsg.userSource
        };
        this.$ajax
          .getChatRecord(para)
          .then(res => {
            this.recordList = res.data.list;
            this.recordPage.total = res.data.total;
            this.recordPage.page = res.data.pages;
          })
          .catch(err => {
            this.$message({
              message: err.msg,
              type: "error"
            });
          });
      },
      changeRecordListCurrent(val) {
        //诊断规范分页
        this.recordPage.current = val;
        this.getRecordList();
      },
      openVideoRecord() {
        this.dialogVideoRecord = true;
      },
      applyConsult() {
        this.isApply = true;
      },
      backConsult() {
        this.isApply = false;
      }
    }
  };
  </script>

  <style lang="scss">
  .my-user-box {
    .l-panel {
      width: 100%;
      padding: 30px;
    }
  }

  .send-message-btn {
    text-align: center;
  }

  .dialog-frame {
    .el-dialog {
      width: 800px !important;
      max-width: 900px !important;
    }
  }
  </style>
